<template>
	<el-dialog v-model="visible" title="项目进度" close-on-click-modal @close="closeHandle">
		<el-table v-loading="loading" :data="dataList" border class="layout-table">
			<!--			<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
			<el-table-column type="index" header-align="center" align="center" fixed="left" label="序号" width="80" />
			<el-table-column prop="projectName" label="项目名称" header-align="center" align="center" show-overflow-tooltip width="150" />
			<el-table-column prop="projectCode" label="项目编号" header-align="center" align="left" show-overflow-tooltip width="150" />
			<el-table-column prop="progressReport" label="项目进度" header-align="center" align="left" />
			<el-table-column prop="creator" label="创建人" header-align="center" align="center" show-overflow-tooltip width="120" />
			<el-table-column
				prop="createTime"
				label="创建时间"
				header-align="center"
				align="center"
				show-overflow-tooltip
				width="100"
				:formatter="formatter"
			/>
			<!--			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="180">
				<template #default="scope">
					<el-button v-auth="'project:info:delete'" type="success" link @click="openProgress(scope.row.id)">查看进度</el-button>
					<el-button v-auth="'project:info:update'" type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
					<el-button v-auth="'project:info:delete'" type="danger" link @click="deleteBatchHandle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>-->
		</el-table>
		<el-pagination
			:current-page="pageData.page"
			:page-sizes="pageData.pageSizes"
			:page-size="pageData.limit"
			:total="pageData.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
		<!--		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" :disabled="loading" @click="visible = false">确定</el-button>
		</template>-->
	</el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useProjectReports } from '@/api/project/report'
import { TableColumnCtx } from 'element-plus'
import { formatterDate } from '@/utils/dateFormat'

const dataList = ref([])

const loading = ref(false)
const visible = ref(false)
const projectId = ref(0)

const pageData = ref({
	page: 1,
	pageSizes: [10, 20, 50, 100, 200],
	total: 0,
	limit: 10
})

const query = async (id: number) => {
	loading.value = true
	useProjectReports({ page: pageData.value.page, limit: pageData.value.limit, projectId: id })
		.then(res => {
			// @ts-ignore
			if (res.code === 0) {
				dataList.value = res.data.list
				pageData.value.total = res.data.total
			}
		})
		.finally(() => {
			loading.value = false
		})
}

const open = async (id: number) => {
	projectId.value = id
	visible.value = true
	await query(id)
}

const formatter = (row: any, column: TableColumnCtx<any>) => {
	return formatterDate(row, column.property)
}

const sizeChangeHandle = async (val: number) => {
	pageData.value.page = 1
	pageData.value.limit = val
	await query(projectId.value)
}

const currentChangeHandle = async (val: number) => {
	pageData.value.page = val
	await query(projectId.value)
}

defineExpose({
	open
})

const closeHandle = () => {
	visible.value = false
	dataList.value = []
	pageData.value.total = 0
	projectId.value = 0
}
</script>
<style scoped lang="scss">
:deep(.el-input-number) {
	min-width: 35%;
}
</style>
